/**
 * 江苏省智能装备产业联盟 v4 use `@ant-design/pro-layout` to handle Layout.
 * You can view component api by:
 * https://github.com/ant-design/ant-design-pro-layout
 */

import React, { useEffect, useMemo, useRef, useState } from 'react';
import { Link, connect, history } from 'umi';
import { Result, Layout, Button, Menu } from 'antd';
import Authorized from '@/utils/Authorized';
import Logo from '@/components/Logo';
import { ShoppingCartOutlined, SettingFilled, MobileFilled, MailFilled, ClockCircleFilled } from "@ant-design/icons"
import styles from './GcCenter.less'
import routes from '../../config/gcrouter'
import { Scrollbars } from 'react-custom-scrollbars';

const { SubMenu } = Menu;
const { Header, Footer, Sider, Content } = Layout;

const noMatch = (
  <Result
    status={403}
    title="403"
    subTitle="Sorry, you are not authorized to access this page."
    extra={
      <Button type="primary">
        <Link to="/user/login">返回登录</Link>
      </Button>
    }
  />
);



let loop = (data, title, key, children) => (data && data?.length > 0) && data?.map(item => {
  let defaulttitle = title ? title : "name",
    defaultkey = key ? key : "path",
    defaultchildren = children ? children : "routes";

  if (!item[defaulttitle]) {
    return
  }

  const titles = item[defaulttitle];


  if (item[defaultchildren]) {
    return (
      <SubMenu key={item[defaultkey]} title={titles}>
        {loop(item[defaultchildren])}
      </SubMenu>
    );
  } else {
    return <Menu.Item key={item[defaultkey]}>{titles}</Menu.Item>
  }
});


const GcCenter = (props) => {
  let { children, location, login } = props;
  let { lastlogininfo: { telephone, mailNo, userType } } = login;

  let handleClick = e => {
    history.push(e.key)
  };

  return (
    <Layout style={{ height: "100vh", overflow: "hidden" }}>
      <Header className="gcheader">
        <Logo size={"small"} style={{ color: "#fff" }}></Logo>

        <div className="rowcenter">
          <Link style={{ color: "#fff" }}>首页</Link>
          <Link style={{ color: "#fff", marginLeft: 20 }}>产品供应</Link>
          {/* <ShoppingCartOutlined style={{ color: "#fff", fontSize: 18 }} />
          <span style={{ color: "#fff" }}>购物车(10)</span> */}

        </div>
      </Header>
      <Layout>
        <Sider width={252} theme='light' style={{ display: "flex", height: "100%", flexDirection: "column" }}>
          <div className={`${styles.logo} columncenter`}>
            <div style={{ backgroundImage: `url(${require("@/assets/user.png")})`, backgroundSize: "auto 40px", margin: "48px 0 20px 0", flexShrink: 0 }}>
              {
                userType == 1 &&
                <div className={styles.setting}>
                  <SettingFilled style={{ fontSize: 20, marginLeft: 8, marginRight: 8, color: "#fff" }} className={styles.icon}></SettingFilled>
                  <span style={{ color: "#fff", whiteSpace: "nowrap" }}>
                    编辑公司信息
                  </span>
                </div>
              }

            </div>
            <p style={{ fontSize: 16, display: "flex", justifyContent: "space-between", alignItems: "center", width: "100%", padding: "20px", margin: 0 }}>
              <span className="oneline">NanGaoBest</span>
              <span style={{ color: "#ff4800", alignItems: "baseline" }} className="rowcenter">
                <img src={require("@/assets/vip.png")} alt="" />
                &nbsp;1
              </span>
            </p>
            <section style={{ width: "100%", marginBottom: 12 }}>
              {
                userType == 1 && <p style={{ color: !telephone ? "#ff4800" : "#666", display: "flex", justifyContent: "space-between", alignItems: "center", width: "100%", padding: "0px 20px", marginBottom: 10 }}>
                  <span>
                    <MobileFilled
                      style={{ fontSize: 16 }}
                    />
                    &nbsp;手机验证
                  </span>
                  <a style={{ color: !telephone ? "#ff4800" : "#666", alignItems: "baseline" }} className="rowcenter">
                    {!telephone ? "未通过" : "已通过"}
                  </a>
                </p>
              }

              {
                userType == 1 && <p style={{ color: !mailNo ? "#ff4800" : "#666", display: "flex", justifyContent: "space-between", alignItems: "center", width: "100%", padding: "0px 20px", marginBottom: 10 }}>
                  <span>
                    <MailFilled
                      style={{ fontSize: 16 }}
                    />
                    &nbsp;邮箱验证
                  </span>
                  <a style={{ color: !mailNo ? "#ff4800" : "#666", alignItems: "baseline" }} className="rowcenter">
                    {!mailNo ? "未通过" : "已通过"}
                  </a>
                </p>
              }



              <p style={{ color: "#666", display: "flex", justifyContent: "space-between", alignItems: "center", width: "100%", padding: "0px 20px", marginBottom: 10 }}>
                <span>
                  <ClockCircleFilled
                    style={{ fontSize: 16 }}
                  />
                  &nbsp;会员有效期至
                </span>
                <span style={{ alignItems: "baseline" }} className="rowcenter">
                  2021/12/30
                </span>
              </p>


            </section>
          </div>

          <div style={{ flex: 1 }}>
            <Scrollbars
              thumbMinSize={10}
              autoHide
              style={{ height: '100%' }}
              hideTracksWhenNotNeeded={true}
            >
              <Menu
                onClick={handleClick}
                style={{ width: "100%" }}
                selectedKeys={location.pathname}
                mode="inline"
              >
                {
                  loop(routes, "name", "path", "routes")
                }
                <Menu.Item key='logout'>退出登录</Menu.Item>
              </Menu>

            </Scrollbars>
          </div>


        </Sider>
        <Layout style={{ height: "100%" }}>
          <Content
            style={{
              padding: 0,
              margin: 0,
              height: "100%"
            }}
          >
            <Scrollbars
              thumbMinSize={10}
              autoHide
              style={{ height: '100%' }}
              hideTracksWhenNotNeeded={true}
            >
              <div style={{ padding: 20, }}>
                <Authorized noMatch={noMatch}>
                  {children}
                </Authorized>
              </div>

            </Scrollbars>
          </Content>
        </Layout>
      </Layout>
    </Layout >



  );
};

export default connect(({ login, loading }) => ({
  login,
  loading,
}))(GcCenter)
